import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Spin } from 'antd';
import '../common/styles.less';
import { ManageAPI } from '../common/type';
import { ManageServices } from '../services';
import { PurchaseSupplierStatisticsContext } from '../common';
import { StatisticsManageViewTop } from './StatisticsManageViewTop';
import { StatisticsManageViewCenter } from './StatisticsManageViewCenter';
import { StatisticsManageViewBottom } from './StatisticsManageViewBottom';
import moment from 'moment';
import ScrollBarLayout from '@/components/ScrollBarLayout';

const ManageView: React.FC<ManageAPI.IManageView> = ({ curRes }) => {
  /**
   * 样式根目录
   * */
  const styleFixCls = 'purchase-supplierstatics-';

  /**
   * 管理页services
   * */
  const { reloadRequest, pagination, loading, data } = ManageServices(curRes);

  /**
   * 搜索表单Ref
   * */
  const [searchForm] = Form.useForm();

  /**
   * 统计步长
   * */
  const [countStepType, setCountStepType] = useState<string>('月');

  /**
   * 初始化
   * */
  useEffect(() => {
    const val = searchForm?.getFieldsValue();
    if (val?.timeRanges && val?.timeRanges[0] && val?.timeRanges[1]) {
      let [stateTime, endTime] = val?.timeRanges;
      stateTime = moment(stateTime)?.format('YYYY-MM-DD 00:00:00');
      endTime = moment(endTime)?.format('YYYY-MM-DD 23:59:59');
      reloadRequest({ stateTime, endTime });
    }
  }, []);

  return (
    <>
      <PurchaseSupplierStatisticsContext.Provider
        value={{
          curRes,
          styleFixCls,
          countStepType,
          changeStepType: setCountStepType,
          statisticsData: data?.obj || [],
          tableDataPagination: pagination,
          reloadRequest,
        }}
      >
        <Spin spinning={loading}>
          <div className={styleFixCls + 'rootBoxDiv'}>
            <StatisticsManageViewTop searchForm={searchForm} />
            <ScrollBarLayout>
              <StatisticsManageViewCenter />
              <StatisticsManageViewBottom searchParams={searchForm?.getFieldsValue()} />
            </ScrollBarLayout>
          </div>
        </Spin>
      </PurchaseSupplierStatisticsContext.Provider>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(ManageView);
